<template>
  <div class="modal" v-show="$store.state.isOpenLogin">
    <!-- 点击空白关闭登录框 -->
    <div class="modal_bg" @click="closeModal"></div>
    <div class="content">
      <div class="content_t tanxin">
        <h4>登录</h4>
        <span @click="closeModal">X</span>
      </div>

      <!-- 弹窗一 -->
      <div class="shaoma_login" v-show="showLogin">
        <div class="main">
          <img src="../assets/images/login/phone.png" alt="" class="phone" />
          <section>
            <h3>扫码登录</h3>
            <img
              src="../assets/images/login/erweima.png"
              alt=""
              class="erweima"
            />
            <p>
              使用<a href="https://music.163.com/#/download" target="_blank"
                >云音乐APP</a
              >扫码登录
            </p>
          </section>
        </div>
        <span class="btn" @click="loginFn"> 选择其他登录方式 </span>
      </div>

      <!-- 弹窗二 -->
      <div class="other_login" v-show="!showLogin">
        <div class="methods">
          <div class="methods_l">
            <img src="../assets/images/login/pc.png" alt="" />
            <div class="but btn_t" @click="goLogin">账号登录</div>
            <div class="but btn_b" @click="goRegister">注册</div>
          </div>

          <div class="methods_r">
            <ul>
              <li>
                <img src="../assets/images/login/微信.png" alt="" />
                <p>微信登录</p>
              </li>
              <li>
                <img src="../assets/images/login/QQ.png" alt="" />
                <p>QQ登录</p>
              </li>
              <li>
                <img src="../assets/images/login/微博.png" alt="" />
                <p>微博登录</p>
              </li>
              <li>
                <img
                  src="../assets/images/login/品牌标识_网易邮箱.png"
                  alt=""
                />
                <p>邮箱登录</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="agree">
          <input type="checkbox" ref="agree" />
          <label>同意</label>
          <a href="javascript:;">《服务条款》</a>
          <a href="javascript:;">《隐私政策》</a>
          <a href="javascript:;">《儿童隐私政策》</a>
        </div>
      </div>
    </div>

    <!-- 弹窗三 -->
    <div class="content phone_login" v-show="showPhone">
      <div class="content_t tanxin">
        <h4>{{ isLogin ? '账号登录' : '注册' }}</h4>
        <span @click="closeModal">X</span>
      </div>

      <div class="main">
        <div class="input">
          <span>账&nbsp;号:</span>
          <input type="text" v-model="userinfo.username" placeholder="请输入账号" class="input_box" />
        </div>
        <div class="input">
          <span>密&nbsp;码：</span>
          <input type="password" v-model="userinfo.password" placeholder="请输入密码" class="input_box" />
        </div>
        <div class="node">
          <a href="#" v-show="isLogin">验证码登录</a>
          <label>
            <input type="checkbox" :checked="true" ref="remember" />
            {{ isLogin ? '自动登录' : '记住密码' }}
          </label>
        </div>
        <div class="btn" @click="Login()">{{ isLogin ? '登录' : '注册' }}</div>
      </div>

      <div class="bottom">
        <a href="javascript:;" @click="isLogin=!isLogin">&lt;{{ isLogin ? '没有账号？免费注册' : '账号登录' }}</a>
        <a href="javascript:;" @click="goBack" v-show="isLogin">&lt;其他登录方式</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // true 表示显示扫码登录, false 表示显示其他登录
      showLogin: true,
      // true 表示显示扫码登录, false 表示显示其他登录
      showPhone: false,
      // true 表示登录, false表示未登录
      isLogin: true,
      // 定义存放数据的数组
      userinfo: {
        username: "",
        password: "",
      }
    };
  },
  methods: {
    // 密码正则校验
    setThr(str) {
      //不能连续字符（如123、abc）连续3位或3位以上
      var arr = str.split("");
      var flag = true;
      for (var i = 1; i < arr.length - 1; i++) {
        var firstIndex = arr[i - 1].charCodeAt();
        var secondIndex = arr[i].charCodeAt();
        var thirdIndex = arr[i + 1].charCodeAt();
        thirdIndex - secondIndex == 1;
        secondIndex - firstIndex == 1;
        if (thirdIndex - secondIndex == 1 && secondIndex - firstIndex == 1) {
          flag = false;
        }
      }
      if (!flag) {
        return flag;
      }
      return flag;
    },
    // 登录校验
    Login() {
      if (this.isLogin == true) {
        // 获取本地储存用户的登录信息
        let token = localStorage.getItem('user');
        // 将获取到的数据转换成JSON对象
        token = JSON.parse(token);
        // 对获取到的数据进行处理
        console.log(token);
        if(token) {
          // 手机号正则校验
          let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
          if( this.$refs.agree.checked != true ){
            // alert("请先阅读并勾选协议！")
            let obj = { content: "请先阅读并勾选协议！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if(  this.userinfo.username == "" ){
            // alert("账号不为空！")
            let obj = { content: "账号不为空！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if( this.userinfo.username.length != 11){
            // alert("请输入11个字符！")
            let obj = { content: "请输入11个字符！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if( !reg.test(this.userinfo.username) ){
            // alert("账号不符合规范！")
            let obj = { content: "账号不符合规范！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if( this.userinfo.password == "" ){
            // alert("密码不为空！")
            let obj = { content: "密码不为空！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if( this.userinfo.password.length != 9 ){
            // alert("请输入9个字符！")
            let obj = { content: "请输入9个字符！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if( !this.setThr(this.userinfo.password) ){
            // alert("密码不能为连续字符！")
            let obj = { content: "密码不能为连续字符！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if( this.userinfo.username == token.name && this.userinfo.password == token.pwd ){
            // 跳转到首页
            this.$store.commit("isHeaderShow", true);
            this.$store.commit("changeLoginShow", false);
            this.$store.commit("isLoginShow", true);
            this.$router.push("/mymusic");
            // 提示成功
            let obj = { content: "登录成功！", icon: "success" };
            this.$store.dispatch("AsyncToast", obj);
          }else{
            // 提示失败
            let obj = { content: "登录失败！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
          // 清空输入框的内容
          this.userinfo.username = "";
          this.userinfo.password = "";
        }else{
          // 提示失败
          let obj = { content: "请先注册！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
          // 清空输入框的内容
          this.userinfo.username = "";
          this.userinfo.password = "";
        }
      } else {
        // 手机号正则校验
        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if( this.$refs.agree.checked != true ){
          // alert("请先阅读并勾选协议！")
          let obj = { content: "请先阅读并勾选协议！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }else if(  this.userinfo.username == "" ){
          // alert("账号不为空！")
          let obj = { content: "账号不为空！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }else if( this.userinfo.username.length != 11){
          // alert("请输入11个字符！")
          let obj = { content: "请输入11个字符！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }else if( !reg.test(this.userinfo.username) ){
          // alert("账号不符合规范！")
          let obj = { content: "账号不符合规范！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }else if( this.userinfo.password == "" ){
          // alert("密码不为空！")
          let obj = { content: "密码不为空！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }else if( this.userinfo.password.length != 9 ){
          // alert("请输入9个字符！")
          let obj = { content: "请输入9个字符！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }else if( !this.setThr(this.userinfo.password) ){
          // alert("密码不能为连续字符！")
          let obj = { content: "密码不能为连续字符！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }else if( this.userinfo.username == this.userinfo.username && this.userinfo.password == this.userinfo.password ){
          // 使用本地储存用户的登录信息
          let user = { name: this.userinfo.username, pwd: this.userinfo.password }
          // 转为JSON格式字符串进行储存
          let user_json = JSON.stringify(user)
          // 保存user
          localStorage.setItem('user',user_json)
          // 跳转到登录
          this.isLogin = true;
          // 提示成功
          let obj = { content: "注册成功！", icon: "success" };
          this.$store.dispatch("AsyncToast", obj);
        }else{
          // 提示失败
          let obj = { content: "注册失败！", icon: "danger" };
          this.$store.dispatch("AsyncToast", obj);
        }
        // 清空输入框的内容
        this.userinfo.username = "";
        this.userinfo.password = "";
      }
    },
    // 关闭这个登录框
    closeModal() {
      this.$store.commit("changeLoginShow", false);
      // 刷新作用：恢复到第一个弹窗
      this.$router.go(0);
    },
    // 切换到其他登录方式
    loginFn() {
      this.showLogin = false;
    },
    // 登录操作
    goLogin() {
      this.showPhone = true;
      this.isLogin = true;
      // 清空输入框的内容
      this.userinfo.username = "";
      this.userinfo.password = "";
    },
    // 注册操作
    goRegister() {
      this.showPhone = true;
      this.isLogin = false;
      // 清空输入框的内容
      this.userinfo.username = "";
      this.userinfo.password = "";
    },
    // 返回操作
    goBack() {
      this.showPhone = false;
    }
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .modal_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .content {
    width: 530px;
    height: 360px;
    background-color: #fff;
    position: absolute;
    border-radius: 5px;
    overflow: hidden;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    .content_t {
      width: 100%;
      height: 40px;
      background: @black;
      align-items: center;
      h4 {
        font-size: 14px;
        color: #fff;
        padding: 0 20px;
      }
      span {
        font-size: 14px;
        color: #fff;
        padding: 0 20px;
        cursor: pointer;
      }
    }
    .shaoma_login {
      .main {
        margin-top: 25px;
        display: flex;
        justify-content: space-evenly;
        .phone {
          width: 125px;
          height: 220px;
        }
        section {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          h3 {
            font-size: 18px;
            color: @black;
          }
          .erweima {
            height: 128px;
            width: 128px;
          }
          p {
            font-size: 12px;
            a {
              padding: 0 5px;
              color: blue;
            }
          }
        }
      }
      .btn {
        display: block;
        margin: 20px auto;
        width: 120px;
        font-size: 12px;
        border: 1px solid #979797;
        border-radius: 15px;
        line-height: 30px;
        text-align: center;
        color: rgba(0, 0, 0, 0.8);
        cursor: pointer;
      }
    }
    .other_login {
      .methods {
        margin: 25px auto;
        display: flex;
        justify-content: space-evenly;
        .methods_l {
          border-right: 1px solid #ccc;
          padding-right: 40px;
          .but {
            cursor: pointer;
            width: 224px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-align: center;
            margin-top: 20px;
            border-radius: 5px;
          }
          .btn_t {
            color: #fff;
            background: #317ffb;
            &:hover {
              background-color: #1e76c2;
            }
          }
          .btn_b {
            color: #000;
            border: 1px solid #ccc;
            &:hover {
              color: #fff;
              background-color: #317ffb;
            }
          }
        }
        .methods_r {
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          li {
            display: flex;
            cursor: pointer;
            margin-top: 10px;
            width: 148px;
            height: 40px;
            img {
              width: 40px;
              height: 40px;
            }
            p {
              font-size: 12px;
              padding-left: 10px;
              line-height: 40px;
              align-items: center;
            }
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
      .agree {
        display: flex;
        align-items: center;
        margin-left: 30px;
        font-size: 12px;
        label {
          color: #666;
        }
      }
    }
  }
  .phone_login {
    .main {
      width: 300px;
      margin: 50px auto;
      .input {
        height: 36px;
        border-radius: 20px;
        box-sizing: border-box;
        border: 1px solid #999;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        font-size: 14px;
        span {
          line-height: 30px;
          width: 20%;
          color: #666;
          font-weight: bold;
          padding: 0 0 0 10px;
          text-align: center;
        }
        .input_box {
          width: 80%;
          padding: 0 10px;
          line-height: 30px;
          outline: none;
          border: 0;
          border-radius: 0 20px 20px 0;
          border-left: 1px solid #ccc;
          color: #666;
        }
      }
      .node {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        a {
          cursor: pointer;
          font-size: 12px;
          color: #666;
        }
        label {
          font-size: 12px;
          color: #666;
          display: flex;
          align-items: center;
        }
      }
      .btn {
        border-radius: 20px;
        line-height: 36px;
        height: 36px;
        font-size: 14px;
        color: #fff;
        background: #317ffb;
        text-align: center;
        cursor: pointer;
        &:hover {
          background-color: #1e76c2;
        }
        
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #999;
      a {
        cursor: pointer;
        font-size: 12px;
        color: #666;
        margin: 20px;
        &:last-of-type {
          color: blue;
        }
      }
    }
  }
}
</style>